<script setup lang="ts">
import { ref } from 'vue'
const list = ref([1, 2])
const loading = ref(false)
const finished = ref(false)
const load = () => {
  // 1:调用接口
  setTimeout(() => {
    const num = list.value.length + 1
    list.value.push(num)
    loading.value = false
    // 页码++
    // 总条数是20
    if (list.value.length >= 20) {
      finished.value = true
    }
  }, 2000)
}
</script>

<template>
  <div class="play-page">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="load"
    >
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.play-page {
  width: 200px;
  height: 100px;
  border: 5px solid red;
  overflow-y: auto;
}
</style>
